<template>
    <div id="subPage">
        <div class="page-box">
            <div class="left">
                <div class="video-list" ref="video-list">
                    <div :class="['video-item', 'video-item' + layoutId]" v-for="(item, index) in layoutId" :key="index">
                        <template v-if="videoPlayList[index] && videoPlayList[index].playMode == 2">
                            <!-- <div class="videoElement" v-if=" deviceIdList.length > 0 && videoPlayList[index] && videoPlayList[index].flag" :ref="'videoElement' + index" :id="'videoElement' + index" style="object-fit: fill;width:100%;height:100%;outline:none;overflow: hidden;"></div> -->
                            <div class="videoElement" style="object-fit: fill;width:100%;height:100%;outline:none;overflow: hidden;">
                                <!--
                                    1
                                    width: 100%;
                                    height: 100%;
                                    4
                                    width: 49.6%;
                                    height: 48.5%;
                                    6
                                    width: 33%;
                                    height: 43.5%;
                                    9
                                    width: 33%;
                                    height: 33%;
                                -->
                                <iframe id="yushiHtmlId" :src="'/static/yushi_html/index.html?snCode='+
                                    videoPlayList[index].snCode+
                                    '&width='+ (layoutId == 1 ? '900px' : layoutId == 4 ? '600px' : layoutId == 6 ? '300px' : layoutId == 9 ? '300px' : '600px') +
                                    '&height='+ (layoutId == 1 ? '600px' : layoutId == 4 ? '300px' : layoutId == 6 ? '200px' : layoutId == 9 ? '300px' : '400px')"
                                    :width="layoutId == 1 ? '950px' : layoutId == 4 ? '650px' : layoutId == 6 ? '350px' : layoutId == 9 ? '350px' : '650px'"
                                    :height="layoutId == 1 ? '660px' : layoutId == 4 ? '360px' : layoutId == 6 ? '260px' : layoutId == 9 ? '360px' : '460px'"
                                    frameborder="0">
                                </iframe>
                            </div>
                        </template>
                        <template v-if="videoPlayList[index] && videoPlayList[index].playMode == 1">
                            <video v-show="videoPlayList[index].flag" :ref="'videoElement' + index" :id="'videoElement' + index" controls autoplay muted style="object-fit: fill;width:100%;height:100%;outline:none;"></video>
                        </template>
                        <div :class="['operationBox' + layoutId, 'operationBtn']" v-show="videoPlayList[index] && !videoPlayList[index].operationFlag" @click="setOperationFlag(index)"></div>
                        <div :class="['operationBox' + layoutId, 'operationBox']" v-show="videoPlayList[index] && videoPlayList[index].operationFlag">
                            <div class="closeBtn">
                                <Icon style="cursor: pointer;" :type="layoutId != 6 && layoutId != 9 ? 'ios-arrow-forward' : 'ios-arrow-back'" @click="setOperationFlag(index)"/>
                            </div>
                            <div class="operation">
                                <div @click="operationBtn(0, videoPlayList[index] && videoPlayList[index].id)" class="btn operationTop">
                                    <Icon type="ios-arrow-up" />
                                </div>
                                <div @click="operationBtn(3, videoPlayList[index] && videoPlayList[index].id)" class="btn operationRight">
                                    <Icon type="ios-arrow-forward" />
                                </div>
                                <div @click="operationBtn(2, videoPlayList[index] && videoPlayList[index].id)"class="btn operationLeft">
                                    <Icon type="ios-arrow-back" />
                                </div>
                                <div @click="operationBtn(1, videoPlayList[index] && videoPlayList[index].id)" class="btn operationBottom">
                                    <Icon type="ios-arrow-down" />
                                </div>
                                <div class="circle"></div>
                            </div>
                            <div class="focusBtn">
                                <div class="p">
                                    <div class="jia" @click="operationBtn(11, videoPlayList[index] && videoPlayList[index].id)"></div>
                                    <div class="text">调焦</div>
                                    <div class="jian" @click="operationBtn(10, videoPlayList[index] && videoPlayList[index].id)"></div>
                                </div>
                                <div class="p">
                                    <div class="jia" @click="operationBtn(8, videoPlayList[index] && videoPlayList[index].id)"></div>
                                    <div class="text">聚焦</div>
                                    <div class="jian" @click="operationBtn(9, videoPlayList[index] && videoPlayList[index].id)"></div>
                                </div>
                            </div>
                            <!-- <div class="clarity" v-show="allPlayUrl[index] && allPlayUrl[index].hls && allPlayUrl[index].hlsHd">
                                <Select v-model="videoPlayList[index]&&videoPlayList[index].clarityType" style="width:80px;" @on-change='selectClarityChangeFn(index)' v-show="videoPlayList[index]&&videoPlayList[index].clarityType">
                                    <Option v-for="item in clarityList" :value="item.clarityId" :key="item.clarityId">{{item.clarityName}}</Option>
                                </Select>
                            </div> -->
                        </div>
                        <img v-show="videoPlayList[index] && videoPlayList[index].flag"
                            src="../../assets/images/ags/fvs/video-close.png"
                            alt=""
                            class="close"
                            @click="closeVideo(index, videoPlayList[index].id)"
                        />
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="fixed-top">
                    <div class="text-list">
                        <div class="text-item">
                            <div class="num">{{ analysisObj.onlineNum }}个</div>
                            <div class="text">在线摄像头总数</div>
                        </div>
                        <div class="text-item">
                            <div class="num">{{ analysisObj.onlineRate }}%</div>
                            <div class="text">摄像头在线率</div>
                        </div>
                    </div>
                    <div class="title-list">
                        <div class="title-item">摄像头列表</div>
                        <div class="title-item">
                            <Dropdown @on-click="getGroupFn">
                                <a href="javascript:void(0)" class="text">
                                    {{ groupName }}
                                    <Icon type="ios-arrow-down"></Icon>
                                </a>
                                <DropdownMenu slot="list">
                                    <DropdownItem
                                        :selected="item.groupId === groupId"
                                        :name="item.groupId"
                                        v-for="item in groupList"
                                        :key="item.groupId"
                                        >{{ item.groupName }}
                                    </DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                        </div>
                    </div>
                    <div class="device-box">
                        <div class="device-list">
                            <div
                                :class="['device-item']"
                                v-for="(item, index) in deviceListSplice"
                                :key="index"
                                @click="getDeviceInfoFn(item)"
                            >
                                <div class="name">{{ item.name }}</div>
                                <img
                                    v-if="deviceIdList.includes(item.id)"
                                    src="../../assets/images/ags/fvs/active-icon.png"
                                    alt=""
                                    class="active"
                                />
                                <div
                                    :class="[
                                        'deviceStatus',
                                        item.deviceStatus === 1
                                            ? 'green'
                                            : 'red'
                                    ]"
                                ></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="fixed-bottom">
                    <div class="paging">
                        <Page
                            :total="totalList"
                            :page-size="pageSize"
                            :current="currentPage"
                            @on-change="changePage"
                        />
                    </div>
                    <div class="operation-list">
                        <div class="operation-item">
                            <Dropdown @on-click="getLayoutFn">
                                <a href="javascript:void(0)" class="text">
                                    布局{{ layoutName }}
                                    <Icon type="ios-arrow-down"></Icon>
                                </a>
                                <DropdownMenu slot="list">
                                    <DropdownItem
                                        :selected="item.layoutId === layoutId"
                                        :name="item.layoutId"
                                        v-for="item in layoutList"
                                        :key="item.layoutId"
                                        >{{ item.layoutName }}
                                    </DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                        </div>
                        <div class="operation-item">
                            <Dropdown @on-click="getClarityFn">
                                <a href="javascript:void(0)" class="text">
                                    清晰度：{{ clarityName }}
                                    <Icon type="ios-arrow-down"></Icon>
                                </a>
                                <DropdownMenu slot="list">
                                    <DropdownItem
                                        :selected="item.clarityId === clarityId"
                                        :name="item.clarityId"
                                        v-for="item in clarityList"
                                        :key="item.clarityId"
                                        >{{ item.clarityName }}
                                    </DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                        </div>
                        <div class="operation-item">
                            <Dropdown @on-click="getLoopFn">
                                <a href="javascript:void(0)" class="text">
                                    轮播间隔：{{ loopName }}
                                    <Icon type="ios-arrow-down"></Icon>
                                </a>
                                <DropdownMenu slot="list">
                                    <DropdownItem
                                        :selected="item.loopId === loopId"
                                        :name="item.loopId"
                                        v-for="item in loopList"
                                        :key="item.loopId"
                                        >{{ item.loopName }}
                                    </DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getFvsList, getFvsToken, getStreamUrl } from "@/api/api";
import { getBoardFvsAnalysis } from "@/api/md-board";
import { getFvsDevicePTZ } from "@/api/fvs";
import EZUIKit from "ezuikit-js";
import Hls from "hls.js";
export default {
    name: "video-monitoring",
    data() {
        return {
            //组织机构id
            deptId: "",
            //当前分组名称
            groupName: "全部区域",
            //当前分组Id
            groupId: "",
            //分组列表
            groupList: [],
            // 数据统计
            analysisObj: {
                onlineNum: 0, // 在线数量
                totalNum: 0, // 摄像头总数
                onlineRate: 0 // 摄像头在线率
            },
            //设备列表
            deviceList: [],
            //赛选分组列表
            deviceAllList: [],
            //选中设备id
            deviceIdList: [],
            //布局列表
            layoutList: [
                {
                    layoutId: 1,
                    layoutName: "1x1"
                },
                {
                    layoutId: 4,
                    layoutName: "2x2"
                },
                {
                    layoutId: 6,
                    layoutName: "2x3"
                },
                {
                    layoutId: 9,
                    layoutName: "3x3"
                }
            ],
            //当前布局名称
            layoutName: "2x2",
            //当前布局Id
            layoutId: 4,
            //定时轮播节流器
            loopFlag: null,
            //轮播下标
            loopIndex: 0,
            //清晰度列表
            clarityList: [
                {
                    clarityId: 2,
                    clarityName: "标清"
                },
                {
                    clarityId: 1,
                    clarityName: "高清"
                }
            ],
            //当前清晰度名称
            clarityName: "标清",
            //当前清晰度Id
            clarityId: 2,

            //轮播列表
            loopList: [
                {
                    loopId: 0,
                    loopName: "无"
                },
                {
                    loopId: 30,
                    loopName: "30s"
                },
                {
                    loopId: 60,
                    loopName: "60s"
                },
                {
                    loopId: 90,
                    loopName: "90s"
                },
                {
                    loopId: 120,
                    loopName: "120s"
                }
            ],
            //当前轮播名称
            loopName: "无",
            //当前轮播Id
            loopId: 0,
            //播放列表
            videoPlayList: [],
            //播放下标
            videoPlayIndex: -1,
            //播放地址全部列表
            allPlayUrl: [],
            //萤石云播放器token
            ezvizToken: "",
            totalList: 0,
            pageSize: 12,
            currentPage: 1,
            deviceListSplice: []
        };
    },
    beforeDestroy() {
        if (this.loopFlag) {
            clearInterval(this.loopFlag);
            this.loopFlag = null;
        }
        let length = this.videoPlayList.length - 1;
        for (let index = length; index >= 0; index--) {
            if (this.videoPlayList[index]) {
                this.closeVideo(index, this.videoPlayList[index].id);
            }
        }
        window.removeEventListener("resize", this.resizeFn);
    },
    methods: {
        deepCopy(obj){
            let newObj = obj.constructor === Array ? [] : {}; //判断是深拷贝对象还是数组
            for (let i in obj){
                if (typeof obj[i] === "object") {
                    newObj[i] = this.deepCopy({...obj[i]}); //  如果要拷贝的对象的属性依然是个复合类型，递归
                } else {
                    newObj[i] = obj[i];
                }
            }
            return newObj;
        },
        initPageList(current) {
            let startPosition = (current - 1) * this.pageSize;
            let endPosition = current * this.pageSize;
            let deviceList = this.deepCopy(this.deviceList);
            this.deviceListSplice = deviceList.slice(
                startPosition,
                endPosition
            );
        },
        changePage(val) {
            this.currentPage = val;
            this.initPageList(this.currentPage);
        },
        //获取萤石云直播器token
        getToken() {
            let params = {
                deptId: this.deptId,
                platform: 0
            };
            getFvsToken(params)
                .then(res => {
                    if (res.code == 200) {
                        this.ezvizToken = res.data.token;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //操作栏
        setOperationFlag(index) {
            this.videoPlayList[index].operationFlag = !this.videoPlayList[index]
                .operationFlag;
            this.$forceUpdate();
        },
        //萤石云摄像头操作
        operationBtn(type, deviceId) {
            let params = {
                deviceId,
                ptzOption: type
            };
            getFvsDevicePTZ(params)
                .then(res => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //根据不同布局格式，设置设备播放列表
        async setDeviceIdListFn(item) {
            let flag = true;
            console.log('flag1:', flag);
            if (
                this.deviceIdList.includes(item.id) ||
                item.deviceStatus !== 1
            ) {
                return false;
            }
            console.log('flag2:', flag);
            if (this.layoutId === 1 && this.deviceIdList.length < 1) {
                this.deviceIdList.push(item.id);
                this.videoPlayIndex++;
            } else if (this.layoutId === 4 && this.deviceIdList.length < 4) {
                this.deviceIdList.push(item.id);
                this.videoPlayIndex++;
            } else if (this.layoutId === 6 && this.deviceIdList.length < 6) {
                this.deviceIdList.push(item.id);
                this.videoPlayIndex++;
            } else if (this.layoutId === 9 && this.deviceIdList.length < 9) {
                this.deviceIdList.push(item.id);
                this.videoPlayIndex++;
            } else {
                flag = false;
            }
            console.log('flag3:', flag);
            if (flag) {
                for (let i = 0; i < this.videoPlayList.length; i++) {
                    let e = this.videoPlayList[i];
                    if (!e) {
                        this.videoPlayIndex = i;
                        break;
                    }
                }
                let obj = null;
                if (item.playMode == 2) {
                    obj = {
                        flag: true,
                        operationFlag: false,
                        clarityType: 2,
                        id: item.id,
                        playMode: item.playMode,

                        snCode: item.sn
                    };
                } else {
                    obj = {
                        hls: new Hls(),
                        flag: true,
                        operationFlag: false,
                        clarityType: 2,
                        id: item.id,
                        playMode: item.playMode,

                        snCode: item.sn
                    };
                }

                // let obj = {
                //     hls:new Hls(),
                //     flag:true,
                //     operationFlag: false,
                //     clarityType: 2,
                //     id: item.id,
                // };
                // let obj = {
                //     flag: true,
                //     operationFlag: false,
                //     clarityType: 2,
                //     id: item.id,
                // };
                // obj.hls.attachMedia(this.$refs['videoElement'+this.videoPlayIndex][0]);
                this.videoPlayList[this.videoPlayIndex] = obj;
                console.log('videoPlayList -- obj:', obj);
            }
            console.log('flag4:', flag);
            return flag;
        },
        //获取视频设备播放地址
        async getDeviceInfoFn(item) {
            console.log('获取视频设备播放地址:', item);
            let flag = await this.setDeviceIdListFn(item);
            console.log('flag:', flag);
            if (!flag) {
                return;
            }
            let params = {
                id: item.id
            };
            await getStreamUrl(params)
                .then(async res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.allPlayUrl[this.videoPlayIndex] = await res.data;
                        if (this.$refs["videoElement" + this.videoPlayIndex]) {
                            this.$nextTick(async () => {
                                if (item.playMode == 2) {
                                    this.playEZUIKitVideo(
                                        res.data.ezopen,
                                        this.videoPlayIndex
                                    );
                                } else {
                                    if (res.data.playUrl) {
                                        this.$refs[
                                            "videoElement" + this.videoPlayIndex
                                        ][0].setAttribute(
                                            "src",
                                            res.data.playUrl
                                        );
                                    } else {
                                        this.playHlsVideo(
                                            res.data.hls,
                                            this.videoPlayIndex
                                        );
                                    }
                                }
                            });
                            // this.$nextTick(async ()=>{
                            //     let clientWidth = this.$refs['videoElement' + this.videoPlayIndex][0].clientWidth;
                            //     let clientHeight = this.$refs['videoElement' + this.videoPlayIndex][0].clientHeight;
                            //     let obj = this.videoPlayList[this.videoPlayIndex];
                            //     obj['EZUIKitPlayer'] = await new EZUIKit.EZUIKitPlayer({
                            //         id: "videoElement" + this.videoPlayIndex,
                            //         url: res.data.ezopen,
                            //         autoplay: true,
                            //         accessToken: this.ezvizToken,
                            //         decoderPath: "../../../static",
                            //         width:clientWidth,
                            //         height:clientHeight,
                            //         audio:0,
                            //     })
                            //     this.videoPlayList[this.videoPlayIndex] = await obj;
                            //     this.videoPlayList[this.videoPlayIndex]['EZUIKitPlayer'].stop();
                            //     this.videoPlayList[this.videoPlayIndex]['EZUIKitPlayer'].play();
                            //     // this.playVideo(res.data.hls, this.videoPlayIndex);
                            // })
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //关闭实时监控
        closeVideo(index, id) {
            if (!this.videoPlayList[index]) {
                return;
            }

            let ref = `videoElement${index}`;
            let obj = this.videoPlayList[index];
            if (obj.playMode == 1) {
                if (obj.hls) {
                    this.$refs[ref][0].pause();
                    obj.hls.destroy();
                    obj.hls = null;
                }
            } else {
                obj.EZUIKitPlayer.stop();
                obj.EZUIKitPlayer = null;
            }
            obj.flag = false;
            obj.operationFlag = false;
            obj.clarityType = 2;
            obj = null;
            this.videoPlayList[index] = obj;
            // this.deviceIdList[index] = null;
            // this.allPlayUrl[index] = null;
            // this.videoPlayList.splice(index,1);
            this.$refs[ref][0].innerHTML = "";
            let length = this.deviceIdList.length;
            for (let i = length; i >= 0; i--) {
                let delId = this.deviceIdList[i];
                if (id === delId) {
                    this.deviceIdList.splice(i, 1);
                    this.allPlayUrl.splice(i, 1);
                    break;
                }
            }
        },
        //播放实时监控-EZUIKit
        playEZUIKitVideo(url, index) {
            if (this.videoPlayList[index]["EZUIKitPlayer"]) {
                this.videoPlayList[index]["EZUIKitPlayer"].stop();
                this.videoPlayList[index]["EZUIKitPlayer"] = null;
                this.$refs["videoElement" + index][0].innerHTML = "";
            }
            let clientWidth = this.$refs["videoElement" + index][0].clientWidth;
            let clientHeight = this.$refs["videoElement" + index][0]
                .clientHeight;
            let obj = this.videoPlayList[index];
            obj["EZUIKitPlayer"] = new EZUIKit.EZUIKitPlayer({
                id: "videoElement" + index,
                url,
                autoplay: true,
                accessToken: this.ezvizToken,
                decoderPath: "../../../static",
                width: clientWidth,
                height: clientHeight,
                audio: 0
            });
            this.videoPlayList[this.videoPlayIndex] = obj;
            this.videoPlayList[this.videoPlayIndex]["EZUIKitPlayer"].stop();
            this.videoPlayList[this.videoPlayIndex]["EZUIKitPlayer"].play();
        },
        //播放hls
        playHlsVideo(url, index) {
            let _this = this;
            this.videoPlayList[index].hls.attachMedia(
                this.$refs["videoElement" + this.videoPlayIndex][0]
            );
            let videoRef = this.$refs["videoElement" + this.videoPlayIndex][0];
            let defaultImg = "../../assets/images/ags/background.png"

            // 请求和心跳等涉及业务的略
            _this.videoPlayList[index].hls.loadSource(url);
            // 正常解析
            _this.videoPlayList[index].hls.on(
                Hls.Events.MANIFEST_PARSED,
                function() {
                    videoRef.play()
                }
            );
            // 失败
            _this.videoPlayList[index].hls.on(Hls.Events.ERROR, function(
                event,
                data
            ) {
                console.log("未执行----")
                switch (data.type) {
                    // 网络错误导致的错误，据观察这种类型的错，占比最高
                    case Hls.ErrorTypes.NETWORK_ERROR:
                        // 根据自己业务（心跳/错误次数 需要加载还是重新请求，这里只给出简单的，加载情况作为示例）
                        console.log("case1----")
                        _this.videoPlayList[index].hls.startLoad();
                        break;
                    case Hls.ErrorTypes.MEDIA_ERROR:
                        // 多媒体错误
                        _this.videoPlayList[index].hls.recoverMediaError();
                        console.log("case2----")
                        break;
                    default:
                        _this.videoPlayList[index].hls.destroy();
                        _this.$nextTick(() => {
                            // 非网络或多媒体错误，重新获取url
                            _this.playHlsVideo(url, index);
                        });
                        console.log("case3----")
                        break;
                }
            });
        },
        // 播放实时监控
        playVideo(url, index) {
            let _this = this;
            let videoRef = this.$refs["videoElement" + this.videoPlayIndex][0];
            // 请求和心跳等涉及业务的略
            _this.videoPlayList[index].hls.loadSource(url);
            // 正常解析
            _this.videoPlayList[index].hls.on(
                Hls.Events.MANIFEST_PARSED,
                function() {
                    videoRef.play();
                }
            );
            // 失败
            _this.videoPlayList[index].hls.on(Hls.Events.ERROR, function(
                event,
                data
            ) {
                switch (data.type) {
                    // 网络错误导致的错误，据观察这种类型的错，占比最高
                    case Hls.ErrorTypes.NETWORK_ERROR:
                        // 根据自己业务（心跳/错误次数 需要加载还是重新请求，这里只给出简单的，加载情况作为示例）
                        console.log(index, "NETWORK_ERROR");
                        _this.videoPlayList[index].hls.startLoad();
                        break;
                    case Hls.ErrorTypes.MEDIA_ERROR:
                        // 多媒体错误
                        _this.videoPlayList[index].hls.recoverMediaError();
                        break;
                    default:
                        _this.videoPlayList[index].hls.destroy();
                        _this.$nextTick(() => {
                            // 非网络或多媒体错误，重新获取url
                            _this.playVideo(url, index);
                        });
                        break;
                }
            });
        },
        //获取分组
        getGroupFn(groupId) {
            this.loopIndex = 0;
            this.clarityId = 2;
            this.clarityName = "标清";
            this.loopName = "无";
            if (this.loopFlag) {
                clearInterval(this.loopFlag);
            }
            this.groupId = groupId;
            this.deviceList = [];
            if (groupId === "") {
                let deviceList = [];
                for (let i = 0; i < this.deviceAllList.length; i++) {
                    deviceList.push(...this.deviceAllList[i].children);
                }
                this.groupName = "全部区域";
                this.deviceList = deviceList;
                this.totalList = this.deviceList.length;
                this.initPageList(this.currentPage);
                return;
            }
            for (let i = 0; i < this.deviceAllList.length; i++) {
                if (this.deviceAllList[i].groupId === groupId) {
                    this.deviceList = this.deviceAllList[i].children;
                    this.groupName = this.deviceAllList[i].groupName;
                    break;
                }
            }
            this.totalList = this.deviceList.length;
            this.initPageList(this.currentPage);
        },
        //获取布局
        getLayoutFn(layoutId) {
            if(layoutId == 6){
                this.$refs['video-list'].classList.add('fvsList')
            }else{
                this.$refs['video-list'].classList.remove('fvsList')
            }
            this.loopIndex = 0;
            this.clarityId = 2;
            this.clarityName = "标清";
            this.loopName = "无";
            if (this.loopFlag) {
                clearInterval(this.loopFlag);
            }
            this.layoutId = layoutId;
            for (let i = 0; i < this.layoutList.length; i++) {
                if (this.layoutList[i].layoutId === layoutId) {
                    this.layoutName = this.layoutList[i].layoutName;
                    break;
                }
            }
            let length = this.videoPlayList.length - 1;
            for (let index = length; index >= 0; index--) {
                if (index >= this.layoutId) {
                    if (this.videoPlayList[index]) {
                        this.closeVideo(index, this.videoPlayList[index].id);
                    }
                }
            }
            this.videoPlayList.length = this.layoutId;
            this.videoPlayIndex = this.videoPlayList.length;
            this.resizeFn();
        },
        //播放器自适应
        resizeFn() {
            let length = this.videoPlayList.length;
            for (let i = 0; i < length; i++) {
                let obj = this.videoPlayList[i];
                if (!obj || obj.playMode == 1) {
                    continue;
                }
                let iframe = this.$refs["videoElement" + i];
                if (iframe) {
                    let el = iframe[0].children[0];
                    el.style.width = "100%";
                    el.style.height = "100%";
                }
            }
        },
        //获取清晰度
        getClarityFn(clarityId) {
            this.loopIndex = 0;
            this.clarityId = 2;
            this.clarityName = "标清";
            this.loopName = "无";
            if (this.loopFlag) {
                clearInterval(this.loopFlag);
            }
            this.clarityId = clarityId;
            for (let i = 0; i < this.layoutList.length; i++) {
                if (this.clarityList[i].clarityId === clarityId) {
                    this.clarityName = this.clarityList[i].clarityName;
                    break;
                }
            }
            for (let i = 0; i < this.allPlayUrl.length; i++) {
                this.videoPlayList[i].clarityType = this.clarityId;
                this.$nextTick(() => {
                    this.selectClarityChangeFn(i);
                });
            }
        },
        //设置清晰度
        selectClarityChangeFn(index) {
            let url;
            if (this.videoPlayList[index].clarityType === 1) {
                url = this.allPlayUrl[index].ezopenHd;
            } else if (this.videoPlayList[index].clarityType === 2) {
                url = this.allPlayUrl[index].ezopen;
            }
            this.videoPlayList[this.videoPlayIndex]["EZUIKitPlayer"].stop();
            this.videoPlayList[this.videoPlayIndex]["EZUIKitPlayer"].play(url);
            // this.playVideo(url, index)
        },
        //获取轮播
        getLoopFn(loopId) {
            this.loopId = loopId;
            this.loopIndex = 0;
            this.clarityId = 2;
            this.clarityName = "标清";
            this.videoPlayIndex = -1;
            for (let i = 0; i < this.loopList.length; i++) {
                if (this.loopList[i].loopId === loopId) {
                    this.loopName = this.loopList[i].loopName;
                    break;
                }
            }
            if (this.loopId === 0) {
                if (this.loopFlag) {
                    clearInterval(this.loopFlag);
                    return;
                }
            }
            if (this.deviceIdList.length > 0) {
                //过滤离线设备
                let deviceList = this.deviceList.filter(
                    v => v.deviceStatus === 1
                );
                clearInterval(this.loopFlag);
                let fn = async (item, index) => {
                    for (let i = this.layoutId - 1; i >= 0; i--) {
                        this.closeVideo(i, this.videoPlayList[i].id);
                    }
                    this.deviceIdList = [];
                    // let length = index + this.layoutId;
                    for (let i = index; i < deviceList.length; i++) {
                        if (i >= deviceList.length) {
                            break;
                        }
                        await this.getDeviceInfoFn(deviceList[i]);
                    }
                };
                let setTimeInLoop = (arr, fn, time) => {
                    let index = 0;
                    let setTimeGetValue = i => {
                        fn(arr[i], i);
                    };
                    this.loopFlag = setInterval(() => {
                        if (index === deviceList.length) {
                            index = 0;
                        }
                        setTimeGetValue(index);
                        for (let i = 0; i < this.layoutId; i++) {
                            index += 1;
                            if (index === deviceList.length) {
                                break;
                            }
                        }
                    }, time);
                };
                setTimeInLoop(deviceList, fn, this.loopId * 1000);
            }
        },
        //数据处理
        async initData(list) {
            let groupIdList = []; //分组Id集合
            let groupList = []; //分组集合
            let deviceList = [];
            list.forEach(v => {
                v.clarityType = 2;
                if (!groupIdList.includes(v.groupId)) {
                    groupIdList.push(v.groupId);
                    let obj = {
                        groupId: v.groupId,
                        deptId: v.deptId,
                        groupName: v.groupName,
                        children: [],
                        flag: false
                    };
                    let groupObj = {
                        groupId: v.groupId,
                        groupName: v.groupName
                    };
                    groupList.push(groupObj);
                    list.forEach(item => {
                        if (item.groupId == v.groupId) {
                            item.operationFlag = false;
                            obj.children.push(item);
                        }
                    });
                    deviceList.push(obj);
                }
            });
            for (let i = 0; i < deviceList.length - 1; i++) {
                for (let j = 0; j < deviceList.length - 1 - i; j++) {
                    if (deviceList[j].deptId > deviceList[j + 1].deptId) {
                        let temp = deviceList[j];
                        deviceList[j] = deviceList[j + 1];
                        deviceList[j + 1] = temp;
                    } else if (
                        deviceList[j].deptId == deviceList[j + 1].deptId
                    ) {
                        if (deviceList[j].groupId > deviceList[j + 1].groupId) {
                            let temp = deviceList[j];
                            deviceList[j] = deviceList[j + 1];
                            deviceList[j + 1] = temp;
                        }
                    }
                }
            }
            let obj = {
                groupId: "",
                groupName: "全部区域"
            };
            this.groupList = [obj, ...groupList];
            this.deviceAllList = deviceList;
            this.getGroupFn("");
            let resDeviceList = this.deviceList.filter(
                v => v.deviceStatus === 1
            );
            // let resDeviceList = this.deviceList;
            for (let i = 0; i < resDeviceList.length; i++) {
                if (i < this.layoutId) {
                    await this.getDeviceInfoFn(resDeviceList[i]);
                }
            }
        },
        //获取视频设备列表
        getFvsListFn() {
            let params = {
                keyword: "",
                deptId: this.deptId,
                bizType: ""
            };
            getFvsList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.initData(res.data.list);
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //获取视频设备数据统计
        getBoardFvsAnalysisFn() {
            let params = {
                deptId: this.deptId
            };
            getBoardFvsAnalysis(params)
                .then(res => {
                    if (res.code == 200) {
                        let data = res.data;
                        this.analysisObj = data;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        // this.getToken();
        this.getFvsListFn();
        this.getBoardFvsAnalysisFn();
        setTimeout(() => {
            this.initPageList(this.currentPage);
        }, 1000);

        window.addEventListener("resize", this.resizeFn);
    }
};
</script>

<style scoped lang="scss">
@function pxToRem($val) {
    @return $val/100 + rem;
}

/deep/#subPage {
    width: 100%;
    height: 100%;
    min-width: pxToRem(1440);
    box-sizing: border-box;
    overflow: hidden;
    pointer-events: auto !important;
    .page-box {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            height: 100%;
            width: 75%;
            .fvsList{
                .video-item6:nth-child(1){
                    margin-bottom: pxToRem(33);
                }
                .video-item6:nth-child(2){
                    margin-bottom: pxToRem(33);
                }
                .video-item6:nth-child(3){
                    margin-bottom: pxToRem(33);
                }
                .video-item6:nth-child(4){
                    margin-top: pxToRem(33);
                }
                .video-item6:nth-child(5){
                    margin-top: pxToRem(33);
                }
                .video-item6:nth-child(6){
                    margin-top: pxToRem(33);
                }
            }
            .video-list {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                .video-item {
                    position: relative;
                    width: pxToRem(696);
                    height: pxToRem(406);
                    background-image: url("../../assets/images/ags/fvs/main_panel.png");
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    padding: pxToRem(5);
                    box-sizing: border-box;
                    .close {
                        position: absolute;
                        right: pxToRem(10);
                        top: pxToRem(20);
                        width: pxToRem(25);
                        height: pxToRem(25);
                        z-index: 15;
                        cursor: pointer;
                    }

                    &:nth-of-type(3n) .operationBox.operationBox6 {
                        left: pxToRem(-212) !important;

                        .closeBtn {
                            .ivu-icon-ios-arrow-back {
                                transform: rotate(180deg);
                            }
                        }
                    }

                    &:nth-of-type(3n) .operationBox.operationBox9 {
                        left: pxToRem(-212) !important;

                        .closeBtn {
                            .ivu-icon-ios-arrow-back {
                                transform: rotate(180deg);
                            }
                        }
                    }

                    .operationBtn {
                        position: absolute;
                        bottom: pxToRem(150);
                        right: pxToRem(10);
                        z-index: 999;
                        display: block;
                        width: pxToRem(30);
                        height: pxToRem(30);
                        background-image: url("../../assets/images/fvs/console-control.png");
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        cursor: pointer;
                    }

                    .operationBox {
                        width: pxToRem(212);
                        background: rgba(0, 111, 212, 0.52);
                        border: pxToRem(2) solid rgba(0, 111, 211, 1);
                        box-shadow: -4px 1px 30px rgba(0, 0, 0, 0.12);
                        opacity: 1;
                        border-radius: pxToRem(6);
                        position: absolute;
                        z-index: 999;
                        padding-bottom: pxToRem(40);

                        .ivu-select-selection {
                            background-color: transparent !important;
                            color: #cae2fe !important;
                            border: pxToRem(1) solid #cae2fe;

                            .ivu-icon-ios-arrow-down {
                                color: #cae2fe !important;
                            }
                        }

                        .ivu-select-dropdown {
                            background: rgba(0, 111, 212, 0.52) !important;

                            .ivu-select-item-focus {
                                background-color: transparent !important;
                            }

                            .ivu-select-item {
                                color: #cae2fe !important;
                                opacity: 0.7;

                                &:hover {
                                    background-color: transparent !important;
                                }

                                &.ivu-select-item-selected {
                                    opacity: 1 !important;
                                }
                            }
                        }

                        &.operationBox1 {
                            height: pxToRem(300);
                            bottom: pxToRem(200);
                            right: pxToRem(20);
                        }

                        &.operationBox4 {
                            height: pxToRem(260);
                            bottom: pxToRem(50);
                            right: pxToRem(20);
                        }

                        &.operationBox6 {
                            height: 100%;
                            bottom: 0;
                            right: pxToRem(-215);
                        }

                        &.operationBox9 {
                            height: 100%;
                            bottom: 0;
                            right: pxToRem(-215);
                        }

                        .closeBtn {
                            width: pxToRem(212);
                            height: pxToRem(30);
                            box-shadow: 0px 1px 5px rgba(38, 38, 38, 0.16);
                            opacity: 1;
                            border-radius: 6px 6px 0px 0px;
                            font-size: pxToRem(20);
                            padding-left: pxToRem(20);
                            box-sizing: border-box;
                            color: rgba(255, 255, 255, 0.8);
                        }

                        .operation {
                            position: relative;
                            width: pxToRem(72);
                            height: pxToRem(72);
                            background-color: rgba(255, 255, 255, 0.5);
                            box-shadow: 0px 0px pxToRem(9) pxToRem(1)
                                rgba(30, 30, 30, 0.14);
                            border-radius: 50%;
                            margin: pxToRem(20) auto;

                            .circle {
                                position: absolute;
                                left: 50%;
                                top: 50%;
                                transform: translate(-50%, -50%);
                                width: pxToRem(20);
                                height: pxToRem(20);
                                background: #cae2fe;
                                border-radius: 50%;
                                border: 1px solid #eee;
                                box-sizing: border-box;
                            }

                            .btn {
                                font-size: pxToRem(20);
                                color: rgba(255, 255, 255, 0.8) !important;
                                text-align: center;
                                // width: pxToRem(105);
                                // height: pxToRem(105);
                                // line-height: pxToRem(105);
                                position: absolute;
                                cursor: pointer;

                                &.operationTop {
                                    top: 0;
                                    left: 50%;
                                    transform: translateX(-50%);
                                }

                                &.operationBottom {
                                    bottom: 0;
                                    left: 50%;
                                    transform: translateX(-50%);
                                }

                                &.operationLeft {
                                    top: 50%;
                                    left: 0;
                                    transform: translateY(-50%);
                                }

                                &.operationRight {
                                    top: 50%;
                                    right: 0;
                                    transform: translateY(-50%);
                                }
                            }
                        }

                        .focusBtn {
                            width: 100%;
                            padding: pxToRem(10) pxToRem(30);
                            box-sizing: border-box;

                            .p {
                                width: 100%;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                margin: 10px auto;
                                color: rgba(255, 255, 255, 0.8);

                                .jian {
                                    width: pxToRem(16);
                                    height: pxToRem(16);
                                    background-image: url("../../assets/images/ags/fvs/console-control-right-active.png");
                                    background-size: 100% 100%;
                                    background-repeat: no-repeat;
                                    cursor: pointer;
                                    opacity: 0.8;
                                }

                                .jia {
                                    width: pxToRem(16);
                                    height: pxToRem(16);
                                    background-image: url("../../assets/images/ags/fvs/console-control-left-active.png");
                                    background-size: 100% 100%;
                                    background-repeat: no-repeat;
                                    cursor: pointer;
                                    opacity: 0.8;
                                }
                            }
                        }

                        .clarity {
                            position: absolute;
                            bottom: pxToRem(5);
                            left: 0;
                            width: 100%;
                            display: flex;
                            justify-content: center;
                        }
                    }

                    &.video-item1 {
                        width: 100%;
                        height: 100%;
                    }

                    &.video-item4 {
                        width: 49.6%;
                        height: 48.5%;
                    }

                    &.video-item6 {
                        width: 33%;
                        height: 43.5%;
                    }

                    &.video-item9 {
                        width: 33%;
                        height: 33%;
                    }
                }
            }
        }

        .right {
            width: pxToRem(465);
            height: 100%;
            // box-sizing: border-box;
            background-image: url("../../assets/images/ags/fvs/right_panel.png");
            background-size: 100% 105.5%;
            background-repeat: no-repeat;
            background-position-y: 43%;
            // margin-left: pxToRem(5);
            display: flex;
            flex-flow: column;
            align-content: space-between;
            .fixed-top {
                height: 87%;
                .text-list {
                    width: 75%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: pxToRem(140);
                    margin-left: pxToRem(40);

                    // padding: pxToRem(25) 0;

                    .text-item {
                        flex: 1;
                        box-sizing: border-box;
                        &:last-of-type {
                            margin-right: pxToRem(50);
                        }
                        .num {
                            width: 100%;
                            font-size: pxToRem(28);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #00f0ff;
                            text-align: center;
                        }

                        .text {
                            width: 100%;
                            font-size: pxToRem(12);
                            font-family: Source Han Sans CN-Regular,
                                Source Han Sans CN;
                            font-weight: 400;
                            color: #a8dfff;
                            text-align: center;
                        }
                    }
                }
                .title-list {
                    width: 75%;
                    height: pxToRem(44);
                    margin-left: pxToRem(35);
                    margin-top: pxToRem(-10);
                    background-image: url("../../assets/images/ags/fvs/tabs.png");
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    .title-item {
                        height: 100%;
                        line-height: pxToRem(44);
                        .text {
                            font-size: pxToRem(12);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #def3ff;
                        }

                        &:first-of-type {
                            font-size: pxToRem(12);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #def3ff;
                        }

                        &:last-of-type {
                            .ivu-select-dropdown {
                                background: #042654;
                                box-shadow: 0px 0px pxToRem(5) 0px
                                    rgba(1, 222, 244, 0.31);
                                border-radius: pxToRem(10);

                                .ivu-dropdown-item {
                                    font-size: pxToRem(16);
                                    font-family: Source Han Sans CN;
                                    font-weight: 400;
                                    color: rgba(188, 240, 254, 0.8);

                                    &:hover {
                                        background-color: transparent;
                                        color: rgba(49, 211, 243, 0.8);
                                    }
                                }
                            }
                        }
                    }
                }
                .device-box {
                    position: relative;
                    width: 75%;
                    margin-left: pxToRem(35);
                    margin-top: pxToRem(8);
                    .device-list {
                        width: 100%;

                        .device-item {
                            position: relative;
                            width: 100%;
                            height: pxToRem(28);
                            line-height: pxToRem(35);
                            background: #0c2e3e;
                            margin-bottom: pxToRem(3);
                            font-size: pxToRem(12);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #c6e9fc;
                            cursor: pointer;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            padding: 0 pxToRem(38);
                            box-sizing: border-box;

                            .name {
                                flex: 1;
                                height: pxToRem(35);
                                line-height: pxToRem(35);
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }

                            .active {
                                width: pxToRem(16);
                                height: pxToRem(16);
                                min-width: pxToRem(16);
                                display: block;
                            }

                            .deviceStatus {
                                position: absolute;
                                left: pxToRem(25);
                                top: 50%;
                                transform: translateY(-50%);
                                width: pxToRem(8);
                                height: pxToRem(8);
                                border-radius: 50%;
                                z-index: 10;

                                &.green {
                                    background: rgb(134, 243, 134);
                                }

                                &.red {
                                    background: rgb(158, 4, 4);
                                }
                            }
                        }
                    }
                }
            }
            .fixed-bottom {
                height: 13%;
                .pages-box {
                    width: 90%;
                    height: pxToRem(30);
                    position: absolute;
                    bottom: pxToRem(80);
                    left: 50%;
                    transform: translateX(-50%);
                    text-align: center;
                }
                .paging {
                    width: 75%;
                    display: flex;
                    justify-content: center;
                    margin-left: pxToRem(35);
                    margin-top: pxToRem(10);
                }
                .operation-list {
                    width: 75%;
                    height: pxToRem(30);
                    margin-left: pxToRem(32);
                    margin-top: pxToRem(20);
                    // position: absolute;
                    // bottom: 0;
                    // left: 0;
                    background-image: url("../../assets/images/ags/fvs/tab_bottom_panel.png");
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    .operation-item {
                        // flex: 1;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .text {
                            font-size: pxToRem(12);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #d8f0fe;
                        }
                    }
                }
            }
        }
    }
}

/deep/ .ivu-page-next,
/deep/ .ivu-page-prev {
    width: pxToRem(20);
    height: pxToRem(20);
    min-width: pxToRem(20);
    border: pxToRem(1) solid rgba(1, 223, 244, 0.75);
    background: transparent !important;
    border-radius: pxToRem(2);
    color: rgba(1, 223, 244, 0.75) !important;
    line-height: pxToRem(16);
    box-sizing: border-box;

    a {
        font-size: pxToRem(12);
        color: rgba(1, 223, 244, 0.75) !important;
    }
}

/deep/ .ivu-page-next:hover,
/deep/ .ivu-page-prev:hover {
    border-color: rgba(1, 223, 244, 1) !important;
    color: rgba(1, 223, 244, 1) !important;
}

/deep/ .ivu-page-item {
    width: pxToRem(20);
    height: pxToRem(20);
    min-width: pxToRem(20);
    border: pxToRem(1) solid rgba(1, 223, 244, 0.75);
    background-color: transparent !important;
    line-height: pxToRem(20);

    a {
        font-size: pxToRem(12);
        color: rgba(1, 223, 244, 0.75) !important;
    }
}

/deep/ .ivu-page-options-elevator {
    height: pxToRem(20);
}

/deep/ .ivu-page-item-active {
    border-color: rgba(1, 223, 244, 1) !important;
}

/deep/ .ivu-page-item-active a,
/deep/ .ivu-page-item-active:hover a {
    color: rgba(1, 223, 244, 1) !important;
}

/deep/ .ivu-select-dropdown {
    background: #042654 !important;
    box-shadow: 0px 0px pxToRem(5) 0px rgba(1, 223, 244, 0.2);
    border-radius: pxToRem(10);

    &::-webkit-scrollbar {
        width: 6px;
    }

    /*滚动槽*/
    &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(1, 223, 244, 0.2);
        border-radius: 10px;
    }

    /* 滚动条滑块 */
    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(1, 223, 244, 0.2);
        -webkit-box-shadow: inset 0 0 6px rgba(1, 223, 244, 0.2);
    }

    &::-webkit-scrollbar-thumb:window-inactive {
        background: rgba(255, 0, 0, 0.4);
    }

    .ivu-dropdown-item {
        font-size: pxToRem(16);
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: rgba(188, 240, 254, 0.8);

        &.ivu-dropdown-item-selected {
            background-color: transparent;
            color: rgba(49, 211, 243, 0.8);
        }

        &:hover {
            background-color: transparent;
            color: rgba(49, 211, 243, 0.8);
        }
    }
}
</style>
<style lang="scss">
/deep/.loading-container {
    width: 100% !important;
    height: 100% !important;
    .loading-item {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
}
</style>
